<template>
	<view>
		<!-- <u-navbar title=" " placeholder leftIcon=' ' :autoBack="false">
			<view class="u-nav-slot" slot="left">
				<u-search height='73rpx' placeholder="搜索关键字" :showAction='false' v-model="keyword"></u-search>
			</view>
		</u-navbar> -->
		<view class="probox">
			<project-item v-for="(item,index) in list" :key="index" @fabu='fabu(index)' :index='index' :pro="item"></project-item>
			<u-loadmore :status="status" @loadmore="onre"/>
		</view>
		
		<u-popup :show="show" @close="show=false" mode="bottom">
			<view v-if="show" :style="{paddingBottom:height+'px'}">
				<view class="textbox">
					<u--textarea autoHeight :disableDefaultPadding='true' :cursor='list[curindex].text.length'
					 placeholderStyle='color: #fff'
						v-model="list[curindex].text" :showConfirmBar='false' placeholder="请输入内容" :focus='focus'
						:adjustPosition='false'></u--textarea>
					<view class="sendbox" @click="send(list[curindex].text,list[curindex].id)">
						发送
					</view>
				</view>
			</view>
		</u-popup>
		<image @click="clickto('/pages/project/type')" class="fb" src="/static/img/fabu.png" mode=""></image>
	</view>
</template>

<script>
	import {getDymicList,makeComment} from '@/api/dymic.js'
	export default {
		data() {
			return {
				keyword: '',
				show: false,
				curindex: null,
				list: [],
				height:0,
				focus:true,
				status: 'loadmore',
				page: 1,
				last_page:0
			};
		},
		methods:{
			fabu(index){
				this.show=true
				this.curindex=index
			},
			clickto(url){
				uni.navigateTo({
					url
				})
			},
			// 发布评论
			send(text,id){
				if(!text){
					uni.showToast({
						title:'请输入评论内容',
						icon:'none'
					})
					return
				}
				// console.log(text,id)
				makeComment({dymic_id:id,comment:text}).then(res=>{
					// console.log(res)
					if(res.data.code==1){
						uni.showToast({
							title:'评论成功',
							icon:'none'
						})
						this.list[this.curindex].text=''
						this.show=false
					}
				})
			},
			getlist(){
				getDymicList({page:this.page}).then(res=>{
					this.status='loadmore'
					this.last_page=res.data.data.last_page
					this.list=[...this.list,...res.data.data.data]
					uni.stopPullDownRefresh()
					this.list.map(t=>{
						t.imgs=[]
						t.image.split(',').map(r=>{
							t.imgs.push(this.$BASE_URL+r)
						})
						t.text=''
						uni.getStorageSync('xmtypelist').map(n=>{
							if(n.id==t.type){
								t.typename=n.name
							}
						})
					})
				})
			},
			onre(){
				this.page++
				if(this.page<=this.last_page){
					this.getlist()
				}else{
					this.status='nomore'
				}
			}
		},
		onLoad() {
			let _this=this
			uni.onKeyboardHeightChange(res => {
			  _this.height=res.height
			})
			this.getlist()
		},
		onReachBottom() {
			this.onre()
		},
		onPullDownRefresh() {
			this.page=1
			this.list=[]
			this.getlist()
		}
	}
</script>

<style lang="less">
	/deep/.u-search__content {
		width: calc(516rpx - 20px);
	}
	.textbox{
		padding: 30rpx;
		display: flex;
		align-items: center;
		.sendbox{
			padding: 0 28rpx;
			line-height: 63rpx;
			background: linear-gradient(265deg, #FF8717, #FF5F00);
			border-radius: 32rpx;
			color: #fff;
			font-size: 28rpx;
			margin-left: 19rpx;
		}
	}
	/dee/.u-textarea{
		background-color: #F9F9F9!important;
	}
	.fb{
		position: fixed;
		bottom: 159rpx;
		right: 24rpx;
		width: 147rpx;
		height: 140rpx;
	}
	.probox{
	}
</style>
